<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Events - University of Leicester IEEE Student Branch</title>
    <!-- Base -->
    <link rel="stylesheet" href="../script/css/base/variables.css" />
    <link rel="stylesheet" href="../script/css/base/reset.css" />
    <link rel="stylesheet" href="../script/css/base/typography.css" />

    <!-- Layouts -->
    <link rel="stylesheet" href="../script/css/layouts/header.css" />
    <link rel="stylesheet" href="../script/css/layouts/footer.css" />
    <link rel="stylesheet" href="../script/css/layouts/sections.css" />

    <!-- Components -->
    <link rel="stylesheet" href="../script/css/components/nav.css" />
    <link rel="stylesheet" href="../script/css/components/buttons.css" />
    <link rel="stylesheet" href="../script/css/components/downloads.css" />
    <link rel="stylesheet" href="../script/css/components/cards.css" />
    <link rel="stylesheet" href="../script/css/components/timeline.css" />

    <!-- Page-specific -->
    <link rel="stylesheet" href="../script/css/pages/event-detail.css" />
  </head>
  <body>
    <!-- 导航 -->
    <nav class="global-nav">
      <img src="../res/image/IEEE学生会logo.png" alt="IEEE Logo" class="nav-logo">
      <div class="nav-menu">
          <a href="index.html" class="nav-item">Home</a>
          <a href="events.html" class="nav-item">Events</a>
          <a href="calendar.html" class="nav-item">Calendar</a>
          <a href="collaboration.html" class="nav-item">Collaboration</a>
          <!-- <a href="committee.html" class="nav-item">Committee</a> -->
          <a href="about.html" class="nav-item">About Us</a>
      </div>
      <a href="#join" class="nav-item join-button">Join IEEE</a>
  </nav>

    <main class="event-detail">
      <!-- 活动头图区 -->
      <div class="event-hero" id="event-hero">
        <div class="hero-overlay">
          <span class="event-badge" id="event-badge">Featured Event</span>
          <h1 id="event-title">Annual Hardware Design Competition</h1>
          <div class="event-meta">
            <img
              src="../res/icon/icons8-日历-48.png"
              class="meta-icon"
              alt="Date"
            />
            <span id="event-date">April 20-22, 2025</span>
          </div>
          <div class="event-meta">
            <img
              src="../res/icon/icons8-通知-48.png"
              class="meta-icon"
              alt="Location"
            />
            <span id="event-location">Engineering Lab, Building 3</span>
          </div>
        </div>
      </div>

      <div class="event-content">
        <!-- 主内容区 -->
        <div class="event-main">
          <section class="event-description">
            <h2>Event Description</h2>
            <div id="event-full-description">
              <p>
                This annual competition brings together the brightest minds in
                hardware design across the university. Participants will have
                the opportunity to showcase their innovative projects to a panel
                of industry experts and academic leaders.
              </p>

              <h3>Competition Structure</h3>
              <ul>
                <li>
                  <strong>Preliminary Round:</strong> April 20 - Project
                  submission
                </li>
                <li>
                  <strong>Semi-finals:</strong> April 21 - Prototype
                  demonstration
                </li>
                <li>
                  <strong>Final Round:</strong> April 22 - Live presentation
                </li>
              </ul>

              <h3>Prizes</h3>
              <p>Winners will receive:</p>
              <ul>
                <li>1st Prize: $5,000 + Summer internship at TechCorp</li>
                <li>2nd Prize: $3,000 + Professional development package</li>
                <li>3rd Prize: $1,500 + Hardware toolkit</li>
              </ul>
            </div>
          </section>

          <section class="event-description">
            <h2>Event Highlights</h2>
            <p>Here are some moments from last year's event:</p>

            <!-- 单张居中图片 -->
            <div class="event-image">
              <img
                src="../res/image/event-gallery1.jpg"
                alt="Participants demonstrating their projects"
                loading="lazy"
              />
              <p class="image-caption">2024 Competition Finalists</p>
            </div>

            <!-- 多图网格 -->
            <div class="image-grid">
              <img
                src="../res/image/event-detail1.jpg"
                alt="Judge evaluating project"
                loading="lazy"
              />
              <img
                src="../res/image/event-detail2.jpg"
                alt="Team working on hardware"
                loading="lazy"
              />
              <img
                src="../res/image/event-detail3.jpg"
                alt="Winner announcement"
                loading="lazy"
              />
            </div>
          </section>

          <!-- 文件下载区 -->
          <section class="download-section">
            <h2>Resources & Downloads</h2>
            <div class="download-list" id="download-list">
              <div class="download-item">
                <img
                  src="../res/icon/icons8-文件-24.png"
                  class="download-icon"
                  alt="PDF"
                />
                <div>
                  <a
                    href="../doc/competition-guidelines.pdf"
                    download="Competition_Guidelines.pdf"
                    >Competition Guidelines (PDF)</a
                  >
                  <p class="file-meta">1.2MB · Updated March 15, 2025</p>
                </div>
              </div>

              <div class="download-item">
                <img
                  src="../res/icon/icons8-表格-24.png"
                  class="download-icon"
                  alt="Excel"
                />
                <div>
                  <a
                    href="../doc/registration-template.xlsx"
                    download="Registration_Template.xlsx"
                    >Registration Template (Excel)</a
                  >
                  <p class="file-meta">350KB · Version 2.1</p>
                </div>
              </div>

              <div class="download-item">
                <img
                  src="../res/icon/icons8-图片-24.png"
                  class="download-icon"
                  alt="Image"
                />
                <div>
                  <a href="../doc/poster-design.ai" download="Event_Poster.ai"
                    >Official Poster Design (AI)</a
                  >
                  <p class="file-meta">8.5MB · Print-ready</p>
                </div>
              </div>
            </div>
          </section>

          <!-- 时间线 -->
          <section class="event-timeline">
            <h2>Event Timeline</h2>
            <div class="timeline-container">
              <!-- 可以用JS动态生成或静态编写 -->
              <div class="timeline-node">
                <div class="timeline-date">April 1</div>
                <div class="timeline-content">
                  <h3>Registration Opens</h3>
                  <p>Online registration begins at 9:00 AM</p>
                </div>
              </div>
              <!-- 更多时间线项目... -->
            </div>
          </section>
        </div>

        <!-- 侧边栏 -->
        <aside class="event-sidebar">
          <div class="registration-box">
            <h3>Register Now</h3>
            <p>Registration deadline: April 15, 2025</p>
            <a href="#registration-form" class="button primary"
              >Online Registration</a
            >
            <p class="small-text">Or contact: events@uol.edu</p>
          </div>

          <div class="organizer-info">
            <h3>Organized By</h3>
            <img
              src="../res/image/IEEE学生会logo.png"
              alt="IEEE Student Chapter"
              style="max-width: 100%; margin-bottom: 1rem"
            />
            <p>
              IEEE Student Chapter in collaboration with Department of
              Electrical Engineering
            </p>
          </div>

          <div class="quick-links">
            <h3>Quick Links</h3>
            <ul>
              <li><a href="#">FAQ</a></li>
              <li><a href="#">Past Winners</a></li>
              <li><a href="#">Sponsorship Info</a></li>
            </ul>
          </div>
        </aside>
      </div>

      <!-- 注册表单 (可以初始隐藏) -->
      <section id="registration-form" class="registration-form-section">
        <!-- 表单内容... -->
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="global-footer">
      <div class="footer-container">
          <div class="footer-branding">
              <img src="res/image/GIMO logo.png" alt="GIMO Logo" class="footer-logo">
              <div>
                  <p>University of Leicester</p>
                  <p>IEEE Student Branch</p>
              </div>
          </div>
          <div class="footer-meta">
              <p><a href="mailto:GIMO118@outlook.com" class="footer-link">GIMO118@outlook.com</a></p>
              <p><a href="https://ieee.le.ac.uk" class="footer-link">https://ieee.le.ac.uk</a></p>
              <p>&copy; 2024 GIMO Group</p>
          </div>
      </div>
  </footer>


  </body>
</html>
